
{% extends 'base.html' %}
{% block css %}
    {% load static %}
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/cl-css.css' %}" rel="stylesheet">
    <link href="{% static 'font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'highlight/styles/railscasts.css' %}">
{% endblock %}
{% block title %}
    {% for i in tit %}
        {% if info.id == i.id %}
            <li class="nav-item active">
                <a class="nav-link" href="{% url 'home:index' %}?cid={{ i.id }}">{{ i.title }}</a>
            </li>
        {% else %}
            <li class="nav-item">
                <a class="nav-link" href="{% url 'home:index' %}?cid={{ i.id }}">{{ i.title }}</a>
            </li>
        {% endif %}
    {% endfor %}


{% endblock %}
{% block content %}
    <div class="col-md-9 cl-left">

            <div class="recommend-index">
                <div class="recommend-top">

                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        </ol>
                            <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="{% static 'img/h.jpeg' %}" alt="First slide" height="500px">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="{% static 'img/l.jpeg' %}" alt="Second slide" height="500px">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="{% static 'img/b.jpeg' %}" alt="Third slide" height="500px">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>


                </div>

                <div class="recommend-bottom" style=" height:300px">
                    {% for i in indexs %}
                        <div class="recommend-item">
                            <a href="{% url 'home:detail' %}?art_id={{ i.id }}">
                                <img src="{{ i.avatar.url }}" class="img-fluid" alt="" >
                            </a>
                        </div>
                    {% endfor %}

            </div>


            </div>

            {% for foo in pp %}
                <div class="cl-card">
                    <div class="row">
                        <div class="col-lg-3 col-md-4 col-sm-12 cl-card-image"><a href="{% url 'home:detail' %}?art_id={{ foo.id }}"><img src="{{ foo.avatar.url }}" class="img-fluid" alt=""></a></div>
                        <div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
                            <h3 class="cl-card-main-title"><a href="{% url 'home:detail' %}?art_id={{ foo.id }}">{{ foo.title }}</a></h3>
                            <p class="cl-card-main-info">{{ foo.content | safe }}</p>
                            <p class="cl-card-more"><a href="{% url 'home:detail' %}?art_id={{ foo.id }}">阅读更多...</a></p>
                        </div>
                    </div>
                </div>
            {% endfor %}

            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
                    {% if pp.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="{% url 'home:index' %}?page={{ pp.previous_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                    {% endif %}

                    {% for i in pp.paginator.page_range %}
                        {% if i == page %}
                            <li class="page-item active"><a class="page-link" href="{% url 'home:index' %}?page={{ i }}">{{ i }}</a></li>
                        {% else %}
                            <li class="page-item"><a class="page-link" href="{% url 'home:index' %}?page={{ i }}">{{ i }}</a></li>
                        {% endif %}
                    {% endfor %}
                    {% if pp.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="{% url 'home:index' %}?page={{ pp.next_page_number }}" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                    {% endif %}

                </ul>
            </nav>

        </div>
    <div class="col-md-3 cl-right">
            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">个人微信号</div>
                    <div class="cl-code">
                        <img src="{% static 'img/y.jpg' %}" class="img-fluid" alt="">
                        <p>了解请加微信 谢谢</p>
                    </div>

                </div>
            </div>


        <div class="right-card">
                <div class="right-card-main">
                    <div class="right-card-title">最新文章</div>
                    <ul class="right-recommended-list">
                        {% for i in nwe %}
                            <li><a href="{% url 'home:detail' %}?art_id={{ i.id }}"><i class="fa fa-angle-right" aria-hidden="true"></i>{{ i.title }}</a></li>

                        {% endfor %}


                    </ul>
                </div>
            </div>

{% endblock %}
{% block js %}
    <script src="{% static 'jquery/jquery.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'highlight/highlight.pack.js' %}"></script>
    <script src="{% static 'vue/vue-2.5.16.js' %}"></script>
    <script src="{% static 'js/host.js' %}"></script>
    <script src="{% static 'vue/axios-0.18.0.min.js' %}"></script>
    <script src="{% static 'js/common.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
    <script>hljs.initHighlightingOnLoad();</script>
{% endblock %}
